<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../vendors/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="../vendors/jquery/jqueryui/jquery-ui.min.css">
    <link rel="stylesheet" href="../css/kuber_main.css">
    <link rel="stylesheet" href="../css/kuber_nanoscroller.css">
    <link rel="stylesheet" href="../css/kuber_ptsLite.css">
    <script src="../vendors/jquery/dist/jquery.js"></script>
    <script src="../vendors/jquery/jqueryui/jquery_and_jqueryui.js"></script>
    <script src="../vendors/bootstrap/dist/js/bootstrap.js"></script>
    <script src="../vendors/bootstrap/extend/Modalz_Bootstrap.min.js"></script>
    <script src="../vendors/bootstrap/extend/popover.js"></script>
    <script src="../vendors/bootstrap/extend/Message_Bootstrap.min.js"></script>
    <script src="../vendors/bootstrap/extend/button.js"></script>
    <script src="../vendors/bootstrap/extend/Common.js"></script>
    <style type="text/css">
        #modules {
            padding: 20px;
            background: #eee;
            margin-bottom: 20px;
            z-index: 1;
            border-radius: 10px;
        }

        #dropzone {
            padding: 20px;
            background: #fff;
            min-height: 303px;
            margin-bottom: 20px;
            z-index: 0;
            border: 1px solid #e0dfe4;
            border-top-width: 0px;
        }

        #dropzonepara {
            padding: 20px;
            background: #fff;
            min-height: 303px;
            margin-bottom: 20px;
            z-index: 0;
            border: 1px solid #e0dfe4;
            border-top-width: 0px;
        }

        #dropzonemonitor {
            padding: 20px;
            background: #fff;
            min-height: 303px;
            margin-bottom: 20px;
            z-index: 0;
            border-radius: 0px;
            border: 1px solid #e0dfe4;
            border-top-width: 0px;
        }

        .drop-item {
            cursor: pointer;
            margin-bottom: 10px;
            position: relative;
            font-size: 15px;
            height: 70px;
            line-height: 70px;
        }

        .drop-item .remove {
            position: absolute;
            top: 4px;
            right: 4px;
        }
    </style>
</head>
<body>
<div class="row" style="width:100%;height: 100%">
    <div  id="Meunshow" class="col-md-2" style="border: 1px solid #333; height: 100%;">
        <div class="scriptElement">
        <ul class="grid-rows" style="overflow-y:inherit" id="draggableElement">
            <li data-value="get" class="request ui-draggable ui-draggable-handle">
                <span class="pts_icons get"></span>

                <p>jenkins</p></li>
            <li data-value="post" class="request ui-draggable ui-draggable-handle">
                <span class="pts_icons post"></span>
                <p>tomcat</p></li>
            <li data-value="put" class="request ui-draggable ui-draggable-handle">
                <span class="pts_icons put"></span>
                <p>mysql</p></li>
            <li data-value="delete" class="request ui-draggable ui-draggable-handle">
                <span class="pts_icons delete"></span>
                <p>redis</p></li>

        </ul>
    </div>
    </div>
    <div class="col-md-10" style="border-bottom: 1px solid #333; height: 100%;">
        <div id="dropzone" class="ui-droppable ui-sortable">
        </div>
    </div>
</div>
<script>
    function timedMsg()
    {
        setTimeout( "loadhttpsetpool()",200);
    }
    //获取url中的参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }
    $(function () {
        loadhttpsetpool();
    })
    //http请求新增
    $('#dropzone').droppable({
        activeClass: 'active',
        hoverClass: 'hover',
        accept: ":not(.ui-sortable-helper)",
        drop: function (e, ui) {
            var id = $("#test_list>.selected").attr("data-id");
            var method = $(ui.draggable[0]).attr("data-value");

                $.modalz("kuber_podadd.html?namespace="+getUrlParam("namespace"), "新增", 500, 360);
        }
    }).sortable({
        items: '.drop-item',
        start: function () {
           /* if (!checkinfo()) {
                return;
            }
            strhttpsetid = gethttpsetid();*/
        },
        stop: function (event, ui) {
            /*   var stophttpsetid = gethttpsetid();
           if (stophttpsetid != strhttpsetid) {
             $.ajax({
                    type: "post",
                    url: "<%=request.getContextPath()%>/HttpSet.do?method=updateord",
                    data: {lstord: stophttpsetid},
                    success: function (res) {

                    }

                })
            }*/
        },
        sort: function (event, ui) {
            $(this).removeClass("active");
        }
    });
    $('.request').draggable({
        appendTo: 'body',
        helper: 'clone'
    });

    //加载httpset数据
    function loadhttpsetpool() {
        var id = $("#test_list>.selected").attr("data-id");
        var storage = window.localStorage;
        debugger;
        var res = JSON.parse(storage.kuberpods);
                $("#dropzone").empty();
                if (res.length > 0) {
                    var strhttpset = "";
                    for (var i = 0; i < res.length; i++) {
                        if(res[i].namespace==getUrlParam("namespace")) {
                            strhttpset += "<p class=\"" + (res[i].status == "Stopped" ? "bg-danger" : "bg-primary") + " drop-item\" method=\"" + res[i].method + "\"  httpsetid=\"" + res[i].uid + "\"><span style=\" margin: 5px;margin-left: 80px; float:left;\" class=\"pts_icons " + res[i].method + "\"></span><span style=\"margin-left: 20px;\">" + res[i].name +
                                "&nbsp;&nbsp;&nbsp;&nbsp;容器IP" + res[i].podIP + "容器端口:" + res[i].containerPort + "映射主机IP:" + res[i].hostIP + "映射主机端口：" + res[i].nodePort + "</span><span class=\"trans-edit-icon\">" + (res[i].status == 0 ? "<span id=\"\" class=\"pts_icons httpseterror\"></span>" : "") + "<span id=\"\" class=\"pts_icons edit edithttpset\"></span><span class=\"pts_icons delete deletehttpset\"></span></span></p>";
                        }
                    }
                    $("#dropzone").append(strhttpset);
                    $(".edithttpset").click(function () {
                        $.modalz("kuber_podadd.html?uid="+$(this).parent().parent().attr("httpsetid"), "新增", 500, 360);
                    })
                    $(".deletehttpset").click(function () {
                        debugger;
                        for(var i=0;i<res.length;i++)
                        {
                            if(res[i].uid== $(this).parent().parent().attr("httpsetid"))
                            {
                                res.splice(i,1);
                                storage.kuberpods = JSON.stringify(res);
                                timedMsg();
                            }
                        }

                    })
                }
                else {
                    $("#dropzone").append("<h1 style=\"text-align: center;\">==请拖动元素到这里==</h1>");
                }


    }
</script>
</body>
</html>